<!DOCTYPE html>
<html>
<head>
	<title>全屋列表页面</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="format-detection" content="telephone =no">
	<link rel="stylesheet" href='css/common.css'>
	<link rel="stylesheet" href='css/house.css'>
	<link rel="stylesheet" href='css/swiper-3.4.2.min.css'>
	<script type="text/javascript" src="js/flexible.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/com_extend.js"></script>
	<script type="text/javascript" src="js/zepto.picLazyLoad.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js"></script>
</head>
<body>
<div class="container">
	<!--头部-->
	<header class="com_header prdinfo_header">
		<a href="javascript:;" class="go_back" onclick="history.back()"></a>
		<span class="com_title">全屋</span>
		<span class="classify"></span>
	</header>
		<!--详情页主要内容-->
	<div class="house_list_con"> 
		<!--参数选择-->
		<div class="param">
			<div class="param_choose">
				<div class="param_style">
					<div class="param_tit" data-value="0">
						<span>房型</span>
						<i></i>
					</div>
				</div>
				<div class="param_fg">
					<div class="param_tit" data-value="1">
						<span>风格</span>
						<i></i>
					</div>
				</div>
				<div class="param_area">
					<div class="param_tit" data-value="2">
						<span>面积</span>
						<i></i>
					</div>
				</div>
			</div>
			<div class="param_con">
				<div class="param_list">
					<div class="style_list">
						<a href="#">一房一厅</a>
						<a href="#">两房一厅</a>
						<a href="#">三房两厅</a>
						<a href="#">四房两厅</a>
					</div>
					<div class="fg_list">
						<a href="#">所有</a>
						<a href="#">现代风格</a>
						<a href="#">欧式风格</a>
						<a href="#">简约风格</a>
					</div>
					<div class="area_list" >
						<a href="#">不限</a>
						<a href="#">25m以下</a>
						<a href="#">25m-30m</a>
						<a href="#">35m-38m</a>
						<a href="#">38m以上</a>
					</div>
				</div>
				<div class="bg_black param_black"></div>
			</div>
			
		</div>
		<!--展示列表-->
		<div class="list_con">
			<div class="con">
				<div class="tit">
					<b>保利花园</b>
				</div>
				<div class="house_img">
					<div class="house_l">
						<img src="images/demo/199_215.jpg">
					</div>
					<div class="house_r">
						<a href="#"><img src="images/demo/414_215.jpg"></a>
					</div>
				</div>
				<div class="house_info">
					<div class="info">
						<i class="icon_1"></i>
						<b>楼盘: </b>
						<span>万科又一城</span>
					</div>
					<div class="info">
						<i class="icon_2"></i>
						<b>户型: </b>
						<span>三房两厅</span>
					</div>
					<div class="info">
						<i class="icon_3"></i>
						<b>全屋费用: </b>
						<span>5W</span>
					</div>
				</div>
			</div>
			<div class="con">
				<div class="tit"><b>保利花园</b></div>
				<div class="house_img">
					<div class="house_l">
						<img src="images/demo/199_215.jpg">
					</div>
					<div class="house_r">
						<a href="#"><img src="images/demo/414_215.jpg"></a>
					</div>
				</div>
				<div class="house_info">
					<div class="info">
						<i class="icon_1"></i>
						<b>楼盘: </b>
						<span>万科又一城</span>
					</div>
					<div class="info">
						<i class="icon_2"></i>
						<b>户型: </b>
						<span>三房两厅</span>
					</div>
					<div class="info">
						<i class="icon_3"></i>
						<b>全屋费用: </b>
						<span>5W</span>
					</div>
				</div>
			</div>
			<div class="con">
				<div class="tit"><b>保利花园</b></div>
				<div class="house_img">
					<div class="house_l">
						<img src="images/demo/199_215.jpg">
					</div>
					<div class="house_r">
						<a href="#"><img src="images/demo/414_215.jpg"></a>
					</div>
				</div>
				<div class="house_info">
					<div class="info">
						<i class="icon_1"></i>
						<b>楼盘: </b>
						<span>万科又一城</span>
					</div>
					<div class="info">
						<i class="icon_2"></i>
						<b>户型: </b>
						<span>三房两厅</span>
					</div>
					<div class="info">
						<i class="icon_3"></i>
						<b>全屋费用: </b>
						<span>5W</span>
					</div>
				</div>
			</div>
		</div>
	</div>	
	<!--尾部-->
	<footer class="com_footer">
		<div class="footer_info_top">
			<span class="link">
				<a href="#">关于我们</a>
				|
				<a href="#">定制流程</a>
				|
				<a href="#">联系客服</a>
			</span>
			<address>
				<p>广东皮阿诺科学艺术家居股份有限公司</p>
				<p>联系电话：<span>400-6787-819</span></p>
			</address>
		</div>
		<div class="footer_info_bottom">
			<p>
				<a href="#">触屏版</a> 
				<a href="#">电脑版</a>  
			</p>
			<p>粤ICP备05019711号© 2012-2017</p>
		</div>
		<!--底部导航-->
		<nav class="com_nav">
			<div>
				<a href="javascript:;">
					<i class="icon_1"></i>
					<span>首页</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_2"></i>
					<span>分类</span>
				</a>
			</div>
			<div>
				<a href="javascript:;">
					<i class="icon_3"></i>
					<span>在线咨询</span>
				</a>
			</div>
			<div >
				<a href="javascript:;">
					<i class="icon_4"></i>
					<span>免费设计报名</span>
				</a>
			</div>
		</nav>
	</footer>
</div>
</body>
</html>
<script type="text/javascript">
	$(function(){
		/*点击分类*/
		var $param_list=$(".param_list").find('div');
		var $param_choose=$(".param_choose").find('div');
		$(".param_tit").tap(function(){
			var pindex=$(this).data('value');
			$param_list.css('display','none').eq(pindex).css('display','flex')
			$(".bg_black").css('display','block')
		})
		$(".param_black").tap(function(){
			$(this).css('display','none');
			$param_list.css('display','none');
			$param_choose.removeClass('cur');
		});
		/*选中标题*/
		$param_choose.tap(function(){
			$(this).addClass('cur').siblings().removeClass('cur');
		})
	})
</script>